// 画布区域ComponentPreview.js
export default {
    name: "ComponentPreview",
    dependencies: ['./SimpleCarousel.js', './SimpleNoticeBar.js'], // 依赖声明
    props: {
        modelValue: {
            type: Array,
            required: true
        },
        templateConfig: Object,
        activeIndex: Number,
        draggableOptions: Object
    },
    emits: ['update:modelValue', 'update:activeIndex', 'delete', 'dragStart', 'dragEnd', 'add'],
    setup(props, { emit }) {
        const hoverIndex = ref();
        const componentList = computed({
            get: () => props.modelValue,
            set: (newVal) => emit('update:modelValue', newVal)
        });
        
        const handleDragStart = (evt) => {
            emit('dragStart', evt);
        };

        const handleDragEnd = (evt) => {
            emit('dragEnd', evt);
        };

        const handleAdd = (evt) => {
            emit('add', evt);
        };
        
        // 生成示例状态（按顺序循环）
        const getDemoStatus = (index) => {
            const statusList = ['pending', 'processing', 'completed', 'overdue']
            return statusList[index % statusList.length]
        }
        
        // 生成示例时间（按当前时间递减）
        const getDemoTime = (index) => {
            const baseTime = Date.now() - index * 2 * 60 * 60 * 1000 // 每项间隔2小时
            return window.validators.formatDate(baseTime);
        }
                
        // 状态文字转换
        const formatStatus = (status) => {
            const statusMap = {
                pending: '待处理',
                processing: '处理中',
                completed: '已完成',
                overdue: '已超期'
            }
            return statusMap[status] || '未知状态'
        }

        return {
            componentList,
            handleDragStart,
            handleDragEnd,
            handleAdd,
            hoverIndex,
            getDemoStatus,getDemoTime,formatStatus
            
        };
    },
    template: `
    <div class="canvas-area" @dragover.prevent>
        <div class="canvas-container" :style="{backgroundColor: templateConfig.backgroundColor,padding: templateConfig.pagePadding + 'px'}">
            <draggable 
                v-model="componentList"
                :group="{ name: 'diyGroup', put: true }"
                handle=".drag-handle"
                item-key="id"
                :sort="true"
                :force-fallback="true"
                :fallback-options="draggableOptions"
                ghost-class="ghost-item"
                chosen-class="chosen-item"
                @start="handleDragStart"
                @add="handleAdd"
                @end="handleDragEnd">
                <template #item="{ element, index }">
                    <div class="canvas-component" :class="{ active: index === activeIndex }" @click="$emit('update:activeIndex', index)">
                        <div class="component-preview">
                            <!-- 轮播图 -->
                            <div v-if="element.type === 'carousel'" class="carousel-preview">
                                <SimpleCarousel v-if="element.config.items.length" :items="element.config.items" height="100%" />
                                <div class="carousel-header" v-else>
                                    <el-icon :name="element.icon"/>
                                    <span>轮播图组件</span>
                                </div>
                            </div>

                            <!-- 公告 -->
                            <div v-if="element.type === 'notice'" class="notice-preview">
                                <SimpleNoticeBar :text="element.config.text || '请输入公告内容'" :speed="element.config.speed" :bg-color="element.config.bgColor" :color="element.config.color"/>
                            </div>

                            <!-- 网格菜单 -->
                            <div v-if="element.type === 'menu-grid'" class="menu-grid">
                                <div class="grid-container" 
                                    :style="{
                                        gridTemplateColumns: 'repeat('+element.config.columns + ', minmax(0, 1fr))',
                                        gap: element.config.rowGap + 'px ' + element.config.colGap + 'px',
                                        padding: '0 ' + element.config.colGap + 'px'
                                    }">
                                    <div class="grid-item" v-for="(item, index) in element.config.items" :key="index" :style="{cursor: item.link ? 'pointer' : 'default'}">
                                        <div class="image-container" :style="{width: element.config.iconSize + 'px', height: element.config.iconSize + 'px'}">
                                            <img v-if="item.image" :src="item.image" class="custom-icon" :style="{width: '100%',height: '100%',objectFit: 'contain'}"/>
                                            <div v-else class="empty-image">
                                                <el-icon :size="element.config.iconSize * 0.6">
                                                    <Picture />
                                                </el-icon>
                                            </div>
                                        </div>
                                        <span class="grid-text" :style="{fontSize: element.config.txtSize + 'px',marginTop: element.config.rowGap * 0.3 + 'px'}">
                                            {{ item.name || '未命名菜单' }}
                                        </span>
                                    </div>
                                </div>
                                <div v-if="!element.config.items.length" class="placeholder" :style="{ color: element.config.color }">
                                    <el-icon :size="24"><Warning /></el-icon>
                                    <span>请添加菜单项</span>
                                </div>
                            </div>
                            
                            <!-- win8瓷贴菜单 -->
                            <div v-if="element.type === 'custom-grid'" class="custom-grid-preview" :style="{display: 'grid',gridTemplateColumns: 'repeat(' + element.config.columns + ', 1fr)',gap: element.config.gap + 'px',gridAutoRows: 'minmax(' + element.config.rowHeight + 'px, auto)',width: '100%',minHeight: '300px',backgroundColor: '#f8f9fa',borderRadius: '8px'}">
                            
                                <div v-for="(item, index) in element.config.items" :key="index"
                                    :style="{
                                        gridRowEnd: 'span ' + (item.rowSpan || 1),
                                        height: (element.config.rowHeight * (item.rowSpan || 1) + element.config.gap * (item.rowSpan > 1 ? item.rowSpan -1 : 0)) + 'px',
                                        position: 'relative',
                                        overflow: 'hidden',
                                        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
                                    }"
                                    @mouseover="hoverIndex = index" @mouseleave="hoverIndex = -1">
                                    
                                    <div :style="{width: '100%',height: '100%',backgroundColor: 'white',borderRadius: '8px',boxShadow: hoverIndex === index ? '0 4px 12px rgba(0,0,0,0.15)' : '0 2px 8px rgba(0,0,0,0.1)'}">
                                          
                                        <img v-if="item.image" :src="item.image" :style="{position: 'absolute',width: '100%',height: '100%',minWidth: '100%',minHeight: '100%',maxWidth: 'none',maxHeight: 'none',top: '50%',left: '50%',transform: 'translate(-50%, -50%)',transition: 'opacity 0.5s ease'}"/>
                                              
                                        <div v-else :style="{width: '100%',height: '100%',display: 'flex',alignItems: 'center',justifyContent: 'center',backgroundColor: '#f0f2f5',border: '2px dashed #dcdfe6',borderRadius: '8px'}">
                                            <el-icon :style="{ fontSize: '40px' }"><Picture /></el-icon>
                                        </div>
                                  
                                    </div>
                                </div>
                            
                                <!-- 空状态 -->
                                <div v-if="!element.config.items.length" :style="{gridColumn: '1 / span ' + element.config.columns,height: (element.config.rowHeight * 2) + 'px',display: 'flex',alignItems: 'center',justifyContent: 'center',gap: '8px',backgroundColor: 'rgba(255,255,255,0.9)',border: '2px dashed #e6a23c',borderRadius: '8px',color: '#e6a23c',fontSize: '14px'}">
                                    <el-icon :style="{ fontSize: '24px' }"><Warning /></el-icon>
                                    <span>请添加瓷贴项</span>
                                </div>
                            </div>

                            <!-- 搜索框 -->
                            <div v-if="element.type === 'search'" class="search-preview" :style="{backgroundColor: element.config.bgColor,borderRadius: element.config.radius + 'px'}">
                                <el-input :placeholder="element.config.placeholder" :style="{'--radius': element.config.radius + 'px'}">
                                    <template #prefix>
                                        <el-icon name="search"><Search /></el-icon>
                                    </template>
                                </el-input>
                            </div>
                        </div>
                        
                        <!-- 视频模块 -->
                        <div v-if="element.type === 'video'">
                            <video :src="element.config.videoUrl" controls style="width:100%;height:200px;object-fit:cover"></video>
                        </div>
                        
                        <!-- 文章列表 -->
                        <div v-if="element.type === 'article-list'" :style="{padding: '16px', borderRadius: '8px', minHeight: '300px'}">
                            <!-- 标题栏 -->
                            <div style="display: flex; align-items: center; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #eee;">
                                <el-icon style="font-size: 18px; margin-right: 8px;"><Document /></el-icon>
                                <span :style="{ fontSize: '16px'}">文章列表（显示{{ element.config.num }}篇）</span>
                            </div>
                            
                            <!-- 列表内容 -->
                            <div v-if="element.config.items.length" style="display: flex; flex-direction: column; gap: 12px;">
                                <div v-for="(item, index) in element.config.num" :key="index" :style="{padding: '12px 0', borderBottom: index === Math.min(element.config.num, 3) - 1 ? 'none' : '1px solid #f0f0f0'}">
                                    <div style="display: flex; gap: 12px; align-items: flex-start;">
                                        <!-- 封面图 -->
                                        <div style="width: 100px; height: 60px; background: #f5f7fa; border-radius: 4px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;">
                                            <el-icon style="color: #ddd"><Picture /></el-icon>
                                        </div>
                        
                                        <!-- 内容区域 -->
                                        <div style="flex: 1;">
                                            <div :style="{fontSize: '15px', fontWeight: 500, color: element.config.titleColor, marginBottom: '6px', lineHeight: 1.4}">
                                                示例文章标题 {{ index + 1 }}
                                            </div>
                                            <div :style="{fontSize: '12px', color: element.config.dateColor, marginBottom: '8px'}">2024-03-20 18:11:20</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    	<!-- 查询列表组件 -->
                    	<div v-if="element.type === 'query-list'" :style="{padding: '16px',borderRadius: '8px',minHeight: '300px'}">
                    		<!-- 标题栏 -->
                    		<div style="display: flex; align-items: center; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #eee;">
                    			<el-icon style="font-size: 18px; margin-right: 8px;"><Search /></el-icon>
                    			<span :style="{ fontSize: '16px', color: element.config.titleColor }">
                    				查询填报（显示{{ element.config.num }}条）
                    			</span>
                    		</div>
                    
                    		<!-- 列表内容 -->
                    		<div style="display: flex; flex-direction: column; gap: 12px;">
                                <div v-for="(item, index) in element.config.num" :key="index" :style="{padding: '12px 0',borderBottom: index === Math.min(element.config.num, 10) - 1 ? 'none' : '1px solid #f0f0f0'}">
                                    <div style="display: flex; flex-direction: column; gap: 8px;">
                                        <!-- 标题行 -->
                                        <div style="display: flex; justify-content: space-between; align-items: center;">
                                        	<span :style="{fontSize: '15px',fontWeight: 500,color: element.config.titleColor}">
                                        		示例工单 {{ index + 1 }}
                                        	</span>
                                        	<span :style="{fontSize: '12px',padding: '2px 8px',borderRadius: '4px',backgroundColor: '#f4f4f5',color: '#ff4d4f' }">
                                        		{{ formatStatus(getDemoStatus(index)) }}
                                        	</span>
                                        </div>
                                        
                                        <!-- 日期 -->
                                        <div style="display: flex; align-items: center; gap: 8px;">
                                        	<el-icon style="font-size: 14px; color: element.config.dateColor">
                                        		<Calendar />
                                        	</el-icon>
                                        	<span :style="{ fontSize: '12px', color: element.config.dateColor }">
                                        		{{ getDemoTime(index) }}
                                        	</span>
                                        </div>
                                	</div>
                                </div>
                    		</div>
                    	</div>

                        <div class="component-tools">
                            <el-icon class="drag-handle"><Rank /></el-icon>
                            <el-icon @click.stop="$emit('delete', index)">
                                <Delete />
                            </el-icon>
                        </div>
                    </div>
                </template>
                <template #footer v-if="!modelValue.length">
                    <div class="empty-prompt">
                        <el-icon name="prompt" class="prompt-icon"/>
                        <p>将组件拖拽到此处</p>
                    </div>
                </template>
            </draggable>
        </div>
    </div>
    `
};